import React from 'react'
import {connect} from 'react-redux'
import {incrementAction} from '../store/actions/counterAction'
/*
  在react-redux提出一个结论
  将所有的组件分为UI组件和容器类组件
  UI组件：ui组件是不操作redux状态机中的数据的，只操作非状态机中的数据
  容器类组件：既可以操作状态机中的数据，又可以操作自己的数据
*/
function Counter(props) {
 const increment=()=>{
  props.dispatch(incrementAction(2))
 }
  return (
    <div>
      <h2>{props.num}</h2>
      <button onClick={increment}>+</button>
    </div>
  )
}
const mapStateToProps=(state)=>{
  console.log('mapStateToProps函数访问store中state中的数据',state);
  //在这个函数中如果不return那么就不会将仓库中的数据映射到props中
  //返回的对象的key为将来存放在props中的key，值为仓库中的state
  return{
    num:state.count
  }
}
 export default connect(mapStateToProps)(Counter)
